<template>
  <div>
    <div class="u-title">我创建的歌单({{ mySongSheet.length }})</div>
    <SongSheet :content="mySongSheet" />
    <div class="u-title">我收藏的歌单({{ collectionSongSheet.length }})</div>
    <SongSheet :content="collectionSongSheet" />
  </div>
</template>

<script>
import SongSheet from "@/components/SongSheet";
import { userSongSheet } from "@/api";
export default {
  components: {
    SongSheet,
  },
  created() {
    this.getUserData();
  },
  data() {
    return {
      mySongSheet: [], //我的歌单
      collectionSongSheet: [], //收藏歌单
    };
  },
  methods: {
    getUserData() {
      userSongSheet({ uid: this.$route.query.id, limit: 9999 }).then((res) => {
        // console.log(res);
        let arr = [];
        let arrTwo = [];
        res.playlist.forEach((item) => {
          //item.subscribed是否是用户创建的
          if (!item.subscribed === true) {
            arr.push(item);
          } else {
            arrTwo.push(item);
          }
        });
        this.mySongSheet = arr;
        this.collectionSongSheet = arrTwo;
      });
    },
  },
};
</script>
